const city = document.querySelector('.content > .content-city')
//全部
getQBZ()
async function getQBZ(){
    const res = await $.ajax({
        url:'./js/json/cityname.json',
        dataType:'json'
    })

    res.cityname.forEach(function(item,index){
        city.innerHTML += `<div class="content-city">${item}</div>`
    });
}
//分类
const fenlei = document.querySelector('.content-jm')

getFL()
async function getFL(){
    const res = await $.ajax({
        url:'./js/json/categoryname.json',
        dataType:'json'
    })

    res.categoryname.forEach(function(item,index){
        fenlei.innerHTML += `
        <span class="content-item">${item.name}</span>
        `
    });
}

//子类
const zilei = document.querySelector('.list-live')

getlive()
async function getlive(){
    const res = await $.ajax({
        url:'./js/json/livehouse.json',
        dataType:'json'
    })
    res.livehouse.forEach(function(item,index){
        zilei.innerHTML +=`
        <div class="list-live">${item}</div>
        `
    });
}

//列表项
const liebiao =document.querySelector('.itemlist')

getLB()
async function getLB(){
    const res = await $.ajax({
        url:'./js/json/resultData.json',
        dataType:'json'
    })

    res.resultData.forEach(item =>{
        liebiao.innerHTML +=`
        <div class="list-item" >
            <div class="list-lef">
                <img src="${item.verticalPic}" alt="" data-id="${item.id}">
                <span class="data">${item.categoryname}</span>
            </div>
            <div class="list-rig">
                <div class="rig-top">
                    <span class="dingwei">${item.cityname}</span>
                    <span data-id="${item.id}" class="passage">${item.nameNoHtml}</span>
                    <div class="list-dw">
                        <p>${item.description}</p>
                        <a href=""></a>
                        <span class="sm">${item.venue}</span>
                    </div>

                    <div class="list-dz">
                        <a href=""></a>
                        <span>2021.08.21 周六 20:00</span>
                    </div>
                </div>
                <div class="price">
                    <span class="price-lef">${item.price_str}
                        <i>元</i>
                    </span>
                    <span class="price-rig">${item.showstatus}</span>
                    <button data-id="${item.id}">加入购物车</button>
                    
            </div>
        </div>
        `
        let goodsList =[]
            liebiao.onclick = async function(e){
                e = e || window.event
                    const target = e.target || e.srcElement
                    if(target.tagName === 'BUTTON'){
                        const id = target.dataset.id 
                        goodsList = res.resultData
                        const goods = goodsList.find(item => item.id === id)

                        const cartList = JSON.parse(window.localStorage.getItem('cart')) || []
                        
                        const cartGoods = cartList.find(item => item.id === id)
                        if(cartGoods){
                            cartGoods.number++
                        }else{
                            goods.number = 1
                            cartList.push(goods)
                        }

                        window.localStorage.setItem('cart',JSON.stringify(cartList))             
                }
            }
    })
}
// 您可能还喜欢
const like = document.querySelector('.box-rig > .list')

getcike()
async function getcike(){
    const res = await $.ajax({
        url:"./js/json/suggest.json",
        dataType:'json'
    })
   
    res.suggest.forEach(item =>{
        like.innerHTML +=`
        <div class="list-item">
            <div class="list-lef">
                <img src="${item.verticalPic}" alt="">
            </div>
            <div class="list-rig">
                <a href=""> ${item.projectName}</a>
                <div class="list-js">${item.venue}</div>
                <div class="list-time">${item.showTime}</div>
                <div class="price">
                    <strong>${item.price}</strong>起
                </div>
            </div>
        </div>
        ` 
    })
}
//获取分页元素
const btnprev = document.querySelector('.pagination  .prev')
const btnnext = document.querySelector('.pagination  .next')
const box = document.querySelector('.pagination')


box.addEventListener('click',e => {
    e= e || window.event
    const target = e.target || e.srcElement
    if(target.className === '.prev'){
        console.log(111);
    }
    if(target.className === '.next'){
        console.log(222);
    }
})
//点击当前商品跳转至详情页
const listBox = document.querySelector('.itemlist')
listBox.addEventListener('click',e => {
    e = e || window.event
    const target = e.target || e.srcElement
    if (target.tagName === 'IMG'){
        const id =target.dataset.id
        //存储在 localStorage
        window.localStorage.setItem('id',id)
        //跳转页面
        window.location.href = './detail.html'
    }
    if (target.tagName === 'SPAN'){
        const id = target.dataset.id 
                goodsList = res.resultData
                const goods = goodsList.find(item => item.id === id)

                const cartList = JSON.parse(window.localStorage.getItem('cart')) || []
                
                const cartGoods = cartList.find(item => item.id === id)
                if(cartGoods){
                    cartGoods.number++
                }else{
                    goods.number = 1
                    cartList.push(goods)
                }
                window.localStorage.setItem('cart',JSON.stringify(cartList))

        //跳转页面
        window.location.href = './detail.html'
    }
})

  let goodsList =[]
    liebiao.onclick = async function(e){
        e = e || window.event
            const target = e.target || e.srcElement
            if(target.tagName === 'BUTTON'){
                const id = target.dataset.id 
                goodsList = res.resultData
                const goods = goodsList.find(item => item.id === id)

                const cartList = JSON.parse(window.localStorage.getItem('cart')) || []
                
                const cartGoods = cartList.find(item => item.id === id)
                if(cartGoods){
                    cartGoods.number++
                }else{
                    goods.number = 1
                    cartList.push(goods)
                }

                window.localStorage.setItem('cart',JSON.stringify(cartList))
                        
    }
}

//获取头部搜索框事件
const search = document.querySelector('.cen > input')
const  bmks = document.querySelector('.cen > ol')

search.oninput = function(){
    const text = this.value

    const script = document.createElement('script')
    script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31254,26350&wd=' + text +'&req=2&csor=2&pwd=%E7%88%B1%E5%A5%87%E8%89%BA&cb=fn&_=1624513627828'
    document.body.appendChild(script)

    script.remove()
}
function fn(res){
    if(!res.g){
        //表示res 内没有 g 这个数据
        //让ol隐藏
        bmks.style.display = 'none'
        return
    }
    //表示 res 内 是一个数组 循环数组 让ol显示
    let Str = ''
    res.g.forEach(item =>{
        Str += `<li>${item.q}</li>`
    })
    bmks.innerHTML = Str
    bmks.style.display = 'block'
}

